var markerArrays = [];

Ext.define('CargoVechileForm', {
	extend : 'Ext.form.Panel',
	alias : 'widget.cargovechileform',
	items : [ {
		xtype : 'textfield',
		name : 'plateNo',
		allowBlank : false,
		fieldLabel : 'Plaka'
	}, {
		xtype : 'numberfield',
		name : 'capacity',
		allowBlank : false,
		fieldLabel : 'Kapasite'
	}, {
		xtype : 'hidden',
		name : 'id'
	} ],
	buttons : [ {
		text : 'Kaydet',
		handler : function() {
			var form = this.up('form').getForm();
			if (form.isValid()) {
				form.submit({
					url : 'AdministrationServlet?cmd=saveVechile',
					success : function(form, action) {
						Ext.Msg.alert('Success', action.result.msg);
					},
					failure : function(form, action) {
						Ext.Msg.alert('Failed', action.result.msg);
					}
				});
			}
		}
	} ],
	initComponent : function() {
		this.callParent();
		if (!Ext.isEmpty(this.vechileId)) {
			this.on('afterrender', function() {
				this.load({
					url: 'AdministrationServlet?cmd=getVechile&id=' + this.vechileId
				});
			});
		}
	}
});
function attachClick (marker){
	google.maps.event.addListener(marker, 'click', function (){
		var spWin = Ext.getCmp('_spwin');
		if (spWin) {
			spWin.injectMarker({
				lat: marker.lat,
				lng: marker.lng
			});
		}			
	});
}

Ext.define('CargoVechilePanel', {
	extend : 'Ext.panel.Panel',
	alias : 'widget.cargovechilecontainer',
	layout : 'border',
	tbar : [ {
		xtype : 'button',
		hidden: true,
		text : 'Yeni Araç', // admin ise görünür olacak
		handler : function() {
			Ext.widget('window', {
				modal : true,
				width : 400,
				height : 400,
				layout : 'fit',
				items : [ {
					xtype : 'cargovechileform',
					frame : false,
					border: false
				} ]
			}).show();
		}
	}, {
    	xtype: 'button',
    	text: 'Yollar',
    	handler: function () {
    		
    		new RoadStore().load ({
    			callback: function(recs) {
            		var map = Ext.getCmp('gmap').gmap;
    				var rec = null;
    				var r = ['FF', '11', '50', '78', 'BB', '0A'];
    				var g = ['11', '23', '44', '22', '00', 'F4'];
    				for (var i = 0; i < recs.length; i++) {
    					var flightPlanCoordinates = [];
    					rec = recs[i];
    					flightPlanCoordinates.push(new google.maps.LatLng(rec.get('lat1'), rec.get('lon1')));
    					flightPlanCoordinates.push(new google.maps.LatLng(rec.get('lat2'), rec.get('lon2')));
    					
    					var flightPath = new google.maps.Polyline({
	                           path: flightPlanCoordinates,
	                           strokeColor: '#' + r[i%5] + g[i%5] + '00',
	                           strokeOpacity: 1.0,
	                           strokeWeight: 2
	                         });

	                         flightPath.setMap(map);
    				}
    				
    				
    			}
    		});
    		
    	}
    },
    {
    	xtype: 'button',
    	text: 'Şubeler',
    	handler: function () {
    		
    		new AgencyStore().load ({
    			callback: function(recs) {
            		var mapPanel = Ext.getCmp('gmap'),
						rec, 
						point, 
						lat,
						lon,
						name;
            		
            		for (var i = 0; i < recs.length; i++) {
    					rec = recs[i];
    					lat = rec.get('lat');
    					lon = rec.get('lon');
    					name = rec.get('name');
                		point = new google.maps.LatLng(lat, lon);
                		var marker = mapPanel.addMarker(point, {lat: lat, lng: lon}, false, true, false);
                		marker.setTitle (name);
                		attachClick (marker);
            		}
    			}
    		});
    		
    	}
    },{
    	xtype: 'button',
    	text: 'Shortest Path',
    	handler: function () {
    		new Ext.Window ({
    			title: 'Shortest Path',
    			id : '_spwin',
    			width: 500,
    			injectMarker: function (marker) {
    				var n1 = Ext.getCmp('nokta1');
    				var n2 = Ext.getCmp('nokta2');
    				var n3 = Ext.getCmp('nokta3');
    				//var value = marker.getTitle() + '#' + marker.getPosition().kb + ',' + marker.getPosition().lb;
    				var value = marker.lat + ';' + marker.lng;
    				if (n1.getValue() == '') {
    					n1.setValue(value);
    				} else if (n2.getValue() == '') {
    					n2.setValue(value);   
    				}
    				
    			},
    			items: [{
    				id: 'nokta1',
    				fieldLabel: '1. Nokta',
    				xtype: 'textfield',
    				anchor: '%90'
    			}, {
    				id: 'nokta2',
    				fieldLabel: '2. Nokta',
    				xtype: 'textfield',
    				anchor: '%90'
    			},
    			{id: 'nokta3',
    				fieldLabel:' 3. Nokta',
    				xtype: 'textfield',
    				anchor: '%90'}],
    			buttons: [{
    				text: 'Yeni Noktalar',
    				handler: function (btn) {
    					Ext.getCmp('nokta1').setValue('');
    					Ext.getCmp('nokta2').setValue('');
    					if (Ext.getCmp('gmap').gmap && Ext.getCmp('gmap').gmap.shortestPath) {
        					Ext.getCmp('gmap').gmap.shortestPath.setMap(null);     
        					if (Ext.getCmp('gmap').vechileMarker) { //ekranda araç marker'ı varsa harita üzerinden kaldırır
        						Ext.getCmp('gmap').vechileMarker.setMap(null);
        						Ext.getCmp('gmap').pathNodesArray = null;
        					}
    					}
    					if (markerArrays) {
    					    for (var i in markerArrays) {
    					    	markerArrays[i].setMap(null);
							}
						}
    				}
    			}, {
    				text: 'Draw Shortest Path',
    				handler: function (){
    					var n1 = Ext.getCmp('nokta1');
        				var n2 = Ext.getCmp('nokta2');
    					Ext.Ajax.request({
    					    url: 'PublicServlet?cmd=drawShortestPath',
    					    params: {
    					        n1: n1.getValue(),
    					        n2: n2.getValue()
    					    },
    					    success: function(response) {
    					    	var mapPanel = Ext.getCmp('gmap');
    					    	var map = mapPanel != null ? mapPanel.gmap : null;
    					    	if (Ext.isEmpty(mapPanel) || Ext.isEmpty(map)) {
    					    		alert("Harita paneli açık değil");
    					    		return;
    					    	}
    					    	
    					        var text = response.responseText;
    					        // process server response here
    					        var pathNodesArray = Ext.JSON.decode (text);
    					        
    					        if (pathNodesArray.success == false) {
									alert("En kısa yol çizilemedi. " + pathNodesArray.msg);
									return;
    					        }
    					        
    					        var flightPlanCoordinates = [];
    					        for ( var i = 0; i < pathNodesArray.length; i++) {
									var node = pathNodesArray[i];
	            					flightPlanCoordinates.push(new google.maps.LatLng(node.lat, node.lon));
								}

    					        var shortestPath = map.shortestPath;
    					        if (shortestPath) {
    					        	shortestPath.setPath([]); // ya da shortestPath.setMap(null);
    					        }
    					        
            					shortestPath = new google.maps.Polyline({
	     	                           path: flightPlanCoordinates,
	     	                           strokeColor: '#0000FF', //mavi
	     	                           strokeOpacity: 2.0,
	     	                           strokeWeight: 8
	     	                         });

            					shortestPath.setMap(map);
            					map.shortestPath = shortestPath;
            					
            					//araba resimli marker ekler
            					// elimizde bir dizi var ismi path nodes array tanımlıysa null yada undifened degilse 
            					//ext .get cmp haritayı çizdiğimiz paneli getiriyor 
            					//marker eklemek için path nodes arrayin sıfırıncısını aldık google map api söyledi obje yarat lan lon göm 
            					//path nodes arrayin sıfırıncıyı aldık marker yaratıp panele eklemek için
            					//bir point birde marker yarattık 
            					//object set ettik point set ettik 
            					//3 tane propertysi  var lat lon ikonu vermezsek kırmızıyı koyuyor
            					// center yapayımmı filan parametreler 
            					//map panelde değişkenleri tutuyoruz vehicle marker ve path nodes arrayde tutuyoruz
            					//vehicle movement taskı başlattık 
            					
          
            					if (pathNodesArray && pathNodesArray.length > 0) {
	            					var mapPanel = Ext.getCmp('gmap');
	            					var node = pathNodesArray[0];
	                        		var point = new google.maps.LatLng(node.lat, node.lon);
	                        		var marker = mapPanel.addMarker(point, {
	                        			lat: node.lat, 
	                        			lng: node.lon,
	                        			icon: 'vechile.png'
	                        		}, false, true, false);
	                        		marker.setTitle ('Araç');
	                        		
	                        		//Map panel'e çizilen yolu ve simüle edeceğimiz aracın marker'ını yazıyoruz
	                        		//Bunu verchileMovementTask (Vechile.js'de tanımlı) kullanacağız
	            					mapPanel.pathNodesArray = pathNodesArray;
	                        		mapPanel.vechileMarker = marker;
	                        		
                                    //Ext.TaskManager.stop(verchileMovementTask); //önceden çalışan varsa durduruyoruz                        	
                                    Ext.TaskManager.start(vechileMovementTask);                        	
            					}
            					
    					    }
    					});
    				}
    			}]
    		}).show();
    	}
    },
	'->', {
		xtype : 'button',
		hidden: false,
		text : 'göster',
		enableToggle : true,
		pressed : true,
		toggleHandler : function(btn, state) {
			if (state == true) {
				btn.up('panel').down('#mappanel').show();
			} else {
				btn.up('panel').down('#mappanel').hide();
			}
		}
	} ],
	items : [/* {
		region : 'west',
		split : true,
		width : '30%',
		xtype : 'cargovechilegrid'
	},*/ {
		region : 'center',
		split : true,
		// hidden: true,
		itemId : 'mappanel',
		xtype : 'panel',
		margins : {
			top : 5,
			bottom : 0,
			right : 5,
			left : 0
		},
		layout : 'fit',
		items : [ {
			id : 'gmap',
			xtype : 'gmappanel',
			zoomLevel : 14,
			setCenter : {
				lat : 39.922771,
				lng: 32.846375
			},
			listeners: {
				mapready: function (){
            		var map = Ext.getCmp('gmap').gmap;
            		google.maps.event.addListener(map, 'click', function (event) {
            		    var lat = event.latLng.lat();
            		    var lng = event.latLng.lng();
                		var point = new google.maps.LatLng(lat, lng);
            		    console.log(lat + " " + lng);
                		var marker = Ext.getCmp('gmap').addMarker(point, {lat: lat, lng: lng}, false, true, false);
                		markerArrays.push(marker);
                		var spWin = Ext.getCmp('_spwin');
            			if (spWin) {
            				spWin.injectMarker({
            					lat: lat,
            					lng: lng
            				});
            			}	
            		});
					
				}
			}
		// ankara
		} ]
	} ],
	initComponent : function() {

		this.callParent();
	}
});

Ext.define('CargoVechileGrid', {
	extend : 'Ext.grid.Panel',
	alias : 'widget.cargovechilegrid',
	closable: true,
	columns : [ {
		header : 'Id',
		dataIndex : 'id'
	}, {
		header : 'Plaka',
		dataIndex : 'plateNo',
		flex : 1
	}, {
		header : 'Kapasite',
		dataIndex : 'capacity',
		flex : 1
	} ],
	tbar: [{
		xtype: 'button',
		text: 'Yenixx',
		handler: function (btn){
    		
    		Ext.widget('window', {
				modal : true,
				width : 400,
				height : 300,
				layout : 'fit',
				title: 'Araç Formu',
				items : [ {
					xtype : 'cargovechileform',
					frame : false,
					border: false
				} ]
			}).show();
    		
		}
	}, {
		xtype: 'button',
		text: 'Güncelle',
		handler: function (btn){
			var grid = btn.up('grid');
			if (grid.getSelectionModel().getSelection() <= 0) {
				alert('Satır seçiniz');
				return;
			}
    		var selectedVechile = grid.getSelectionModel().getSelection()[0];
    		Ext.widget('window', {
				modal : true,
				width : 400,
				height : 300,
				layout : 'fit',
				title: 'Araç Formu',
				items : [ {
					xtype : 'cargovechileform',
					frame : false,
					border: false,
					vechileId: selectedVechile.get('id')
				} ]
			}).show();
    		
		}
	}, {
		xtype: 'button',
		text: 'Tazele',
		handler: function (btn){
			var store = btn.up('grid').getStore();
			store.load();
		}
	}, '-', {
		xtype: 'textfield',
		fieldLabel: 'Plaka',
		itemId: 'plateNo'
	}, {
		xtype: 'button',
		text: 'Ara',
		handler: function (btn) {
			var grid = btn.up('grid');
			var store = grid.getStore ();
			var plateNo = grid.down('#plateNo').getValue();
			store.load({
				params: {
					plateNo: plateNo
				}
			});
		}
	}],
	store : {
		type : 'vechile'
	},
	initComponent : function() {

		this.callParent();
	}
});

Ext.define('VechileStore', {
	extend : 'Ext.data.Store',
	alias : 'store.vechile',
	fields : [ 'id', 'plateNo' ],
	autoLoad : true,
	proxy : {
		type : 'ajax',
		url : 'AdministrationServlet?cmd=searchVechile',
		reader : {
			type : 'json',
			root : 'items'
		}
	}
});

Ext.define('RoadStore', {
	extend : 'Ext.data.Store',
	alias : 'store.road',
	fields : [ 'id', 'lat1', 'lon1', 'lat2', 'lon2' ],
	autoLoad : true,
	proxy : {
		type : 'ajax',
		url : 'PublicServlet?cmd=listRoad',
		reader : {
			type : 'json',
			root : 'items'
		}
	}
});

/**
 * Node'lar
 */
Ext.define('VertexStore', {
	extend : 'Ext.data.Store',
	alias : 'store.road',
	fields : [ 'id', 'name', 'lat', 'lon' ],
	autoLoad : true,
	proxy : {
		type : 'ajax',
		url : 'PublicServlet?cmd=listVertex',
		reader : {
			type : 'json',
			root : 'items'
		}
	}
});

/**
 * Aracın hareket simülasyonunu gerçekleştirir.
 */
var vechileMovementTask = {
    	pathNodesArrayIndex: 0, //araç ilk başta 0. indeksten harekete başlayacak, her run çalıştığında bunun artması gerekir
   	    run: function() {
			var mapPanel = Ext.getCmp('gmap'); //Ekrandaki map panel'i bulur
   	    	var pathNodesArray = mapPanel.pathNodesArray;
			
   	    	//panel pathNodesArray tanımsız veya null ise
   	    	if (!pathNodesArray || this.pathNodesArrayIndex > pathNodesArray.length - 1) { //eğer aracın gidişi durduysa yani path bittiyse
   	    		this.pathNodesArrayIndex = 0;
   	    		Ext.TaskManager.stop(vechileMovementTask);
   	    		return ;
   	    	}
    		var marker = mapPanel.vechileMarker;
    		var node = pathNodesArray [this.pathNodesArrayIndex];
    		var point = new google.maps.LatLng(node.lat, node.lon);
    		marker.setPosition(point);
    		
    		//hareketten sonra index'i arttırmak gerekir
    		this.pathNodesArrayIndex = this.pathNodesArrayIndex + 1;
    		
   	    },
   	    interval: 1000 //1 second
   	};
